<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加学生</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->

  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .form-control{
      width: 50%;
    }
  </style>
</head>
<body>
<div class="container" id="con">
  <h3 class="page-header">录入学生</h3>
  <!--            同步请求-->
  <!--            后端控制器url-->
    <div class="form-group">
      <label>学生编号：</label>
      <input type="text" placeholder="请输入编号" v-model="sno" class="form-control">
    </div>
    <div class="form-group">
      <label>学生姓名：</label>
      <input type="text" placeholder="请输入姓名" v-model="sname" class="form-control">
    </div>
    <div class="form-group">
      <label>学生成绩：</label>
      <input type="text" placeholder="请输入成绩" v-model="score" class="form-control">
    </div>
    <div class="form-group">
      <label>学生电话：</label>
      <input type="text" placeholder="请输入电话号码" v-model="stel" class="form-control">
    </div>
  <div class="form-group">
    <label>入学时间：</label>
    <input type="date" placeholder="请选择入学时间" v-model="sdate" class="form-control">
  </div>
  <div class="form-group">
    <label>班号：</label>
    <select v-model:class="cno" class="form-control">
      <option>请选择班级</option>
      <option v-for="c in cnos" v-model:class="c.cno">
        {{c.cno}}
      </option>
    </select>
<!--    <input type="text" placeholder="请输入班号" v-model="cno" class="form-control">-->
  </div>
    <input type="button" value="添加" class="btn btn-primary" @click="add()">

</div>
<script>
  new Vue({
    el: "#con",
    data: {
      sno:null,
      sname: null,
      stel: null,
      score: null,
      sdate: "2023-06-20",
      cno: "请选择班级",
      cnos: null
    },
    mounted() {
      axios
              .get("classes")
              .then(
                      response => (this.cnos = response.data)
              )
    },
    methods:{
      add:function () {
        // 空判断
        if(this.sno == "" || this.sno == null) {
          alert('不能为空')
          return
        }
        // ajax请求
        axios({
          method: 'POST',
          url: 'addStudent',
          data: JSON.stringify({
            "sno": this.sno,
            "sname": this.sname,
            "stel": this.stel,
            "score": this.score,
            "sdate": this.sdate,
            "cno": this.cno
          }),
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(
                response => (alert(response.data))
        )
      }
    },
  })

</script>
</body>
</html>